<template>
  <a-modal
    v-model:open="visible"
    :title="formState._id ? '编辑奖品' : '新增奖品'"
    @ok="handleOk"
    @cancel="handleCancel"
    :confirmLoading="confirmLoading"
  >
    <a-form
      :model="formState"
      :rules="rules"
      ref="formRef"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-form-item label="奖品名称" name="name">
        <a-input v-model:value="formState.name" placeholder="请输入奖品名称" />
      </a-form-item>

      <a-form-item label="奖品图片" :name="['pic', 0]" :rules="[{ required: true, message: '请上传奖品图片', trigger: 'change' }]">
        <upload-component v-model:value="formState.pic[0]" @change="changePic" />
      </a-form-item>


      <a-form-item label="价值" name="price">
        <a-input-number
          v-model:value="formState.price"
          :min="0"
          :precision="2"
          :step="0.01"
          placeholder="请输入奖品价值"
          style="width: 100%"
        />
      </a-form-item>

      <a-form-item label="奖品标签" name="subTitle">
        <a-select v-model:value="formState.subTitle" placeholder="请选择奖品标签">
          <a-select-option v-for="(item, key) in SubTypeEnum" :key="key" :value="key">
            {{ item.value }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import uploadComponent from '@/components/uploadComponent.vue'
import { SubTypeEnum } from '@/utils/enumeration'

interface FormState {
  _id?: string
  name: string
  pic: string[]
  price: number
  subTitle: '1' | '2' | '3' | '4'
}

const visible = ref(false)
const confirmLoading = ref(false)
const formRef = ref<FormInstance>()

const formState = reactive<FormState>({
  name: '',
  pic: [],
  price: 0,
  subTitle: '1',
})

const rules = {
  name: [{ required: true, message: '请输入奖品名称', trigger: 'blur' }],
  price: [{ required: true, message: '请输入奖品价值', trigger: 'change' }],
  subTitle: [{ required: true, message: '请选择奖品标签', trigger: 'change' }],
}

const emit = defineEmits(['update', 'cancel'])

const handleOk = async () => {
  try {
    await formRef.value?.validate()
    confirmLoading.value = true
    emit('update', formState)
    visible.value = false
    confirmLoading.value = false
  } catch (error) {
    console.error('验证失败:', error)
  }
}
const changePic = (url: string) => {
  formState.pic[0] = url
  // 清除图片字段的校验错误
  formRef.value?.clearValidate?.(['pic', 0])
}
const handleCancel = () => {
  visible.value = false
  emit('cancel')
}

const open = (record?: Partial<FormState>) => {
  if (record) {
    Object.assign(formState, {
      _id: record._id,
      name: record.name ?? '',
      pic: record.pic ?? [],
      price: record.price ?? 0,
      subTitle: (record.subTitle as '1' | '2' | '3' | '4') ?? '1',
    })
  } else {
    Object.assign(formState, {
      _id: '',
      name: '',
      pic: [],
      price: 0,
      subTitle: '1',
    })
  }
  visible.value = true
}

defineExpose({
  open,
})
</script>
